<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 300px;
            height: 250px;
            margin: 100px auto;
        }

        input {
            width: 300px;
            height: 30px;
            text-align: left;
            line-height: 50%;
            display: block;
            margin-bottom: 20px;
        }

        input[type="checkbox"] {
            width: 10px;
            height: 10px;
            display: inline;
        }

        button {
            color: white;
            width: 200px;
            height: 30px;
            background-color: green;
        }

        .tis {
            color: red;
            font-size: 12px;
            /* display: none; */
        }

        .yanzheng {
            background-color: skyblue;
        }

        .li {
            width: 10px;
            height: 10px;
            display: inline-block;
            background-color: red;
        }

        .add {
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div>
        <form action="">
            <input type="text" name="userName" placeholder="设置用户名称"><span class="tis"></span>
            <input type="password" name="number" placeholder="输入手机号码"><span class="tis"></span>
            <input type="text" name="yanzheng" placeholder="短信验证码"><span class="tis"></span><span
                class="yanzheng">发送验证码</span>
            <input type="text" name="password" placeholder="设置6-20为字母，数字和符号组合"><span class="tis"></span>
            <input type="text" name="reped" placeholder="再次输入上面的密码"><span class="tis"></span><br>
            <li class="li"></li>已阅读并同意</span><span>《用户服务协议》</span>
            <button>下一步</button>
        </form>

    </div>
    <script>
        //  正确输入上面的密码

        //-------------------------
        //验证码部分模块
        //获取span验证
        //设置点击事件
        //倒计时
        const yan = document.querySelector('.yanzheng');
        console.log(yan);
        //解决多次点击导致计时器叠加问题 利用开关控制 节流阀
        //点击后flag为false所以点击事件无效，直到num为0，flag变为true，点击事件生效
        let flag = true;
        yan.addEventListener('click', function () {
            if (flag) {
                flag = false;
                console.log('点击了');
                let num = 5;
                yan.innerHTML = `${num}后发送验证码`;
                const yanSet = setInterval(function () {
                    num--;
                    yan.innerHTML = `${num}后发送验证码`;
                    if (num === 0) {
                        flag = true;
                        console.log('点击了');
                        yan.innerHTML = `发送验证码`;
                        clearInterval(yanSet);
                    }
                }, 1000)
            }
        })
        //用户名称模块 userName
        const userName = document.querySelector('[name=userName]');
        // console.log(userName);
        //规则
        //设置change事件
        userName.addEventListener('change', userFun);
        function userFun() {
            const reg = /^[a-zA-Z0-9-_]{6,10}$/
            //不满足规则 span显示 返回false
            if (!reg.test(userName.value)) {
                userName.nextElementSibling.innerHTML = '昵称为6-10字符';
                return false;
            }
            //满足span不显示 返回true
            userName.nextElementSibling.innerHTML = '';
            return true;
        }
        //------------------------------------------------
        //手机模块 number
        const number = document.querySelector('[name=number]');
        // console.log(userName);
        //规则
        //设置change事件
        number.addEventListener('change', numberFun);
        function numberFun() {
            const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]8\d|9[0-35-9])\d{8}$/;
            //不满足规则 span显示 返回false
            if (!reg.test(number.value)) {
                number.nextElementSibling.innerHTML = '手机号码为11位';
                return false;
            }
            //满足span不显示 返回true
            number.nextElementSibling.innerHTML = '';
            return true;
        }
        //------------------------------------------------
        //短信验证模块 yanzheng
        const yanzheng = document.querySelector('[name=yanzheng]');
        // console.log(userName);
        //规则
        //设置change事件
        yanzheng.addEventListener('change', yanzhengFun);
        function yanzhengFun() {
            const reg = /^\d{6}$/;
            //不满足规则 span显示 返回false
            if (!reg.test(yanzheng.value)) {
                yanzheng.nextElementSibling.innerHTML = '输入正确验证码';
                return false;
            }
            //满足span不显示 返回true
            yanzheng.nextElementSibling.innerHTML = '';
            return true;
        }
        //------------------------------------------------
        //密码模块 password
        const password = document.querySelector('[name=password]');
        // console.log(userName);
        //规则
        //设置change事件
        password.addEventListener('change', passwordFun);
        function passwordFun() {
            const reg = /^[a-zA-Z0-9-_]{6,20}$/;
            //不满足规则 span显示 返回false
            if (!reg.test(password.value)) {
                password.nextElementSibling.innerHTML = '输入正确验证码 设置6-20位字母，数字，符号组合';
                return false;
            }
            //满足span不显示 返回true
            password.nextElementSibling.innerHTML = '';
            return true;
        }
        //------------------------------------------------
        //重复密码模块 reped

        const reped = document.querySelector('[name=reped]');
        // console.log(userName);
        //规则
        //设置change事件
        reped.addEventListener('change', repedFun);
        function repedFun() {
            // const reg = /^[a-zA-Z0-9-_]{6,20}$/;
            //不满足规则 span显示 返回false
            // const password = document.querySelector('[name=password]');

            if (reped.value !== password.value) {
                reped.nextElementSibling.innerHTML = '正确输入上面的密码';
                return false;
            }
            //满足span不显示 返回true
            reped.nextElementSibling.innerHTML = '';
            return true;
        }
        //-----------------
        //设置li同意协议
        const lis = document.querySelector('li');
        lis.addEventListener('click', function () {
            lis.classList.toggle('add');
        })
        //提交模块
        //阻止默认行为，表单域跳转
        const form = document.querySelector('form');
        form.addEventListener('submit', function (e) {
            //查看是否勾选同意协议
            if (!lis.classList.contains('add')) {
                alert('请勾选同意协议');
                e.preventDefault();
            }
            //依次判断input框是否通过 一个为false就阻止
            if (!userFun()) e.preventDefault(); //返回值为true / false 
            if (!numberFun()) e.preventDefault();
            if (!passwordFun()) e.preventDefault();
            if (!repedFun()) e.preventDefault();
            if (!yanzhengFun()) e.preventDefault();
        })
    </script>
</body>

</html>